<template>
  <div class="homebody" @click="go">
    <!-- 三张图以下 typy=1是图片,typy=2是视频-->
    <div class="single" v-if="spread.type==1&&spread.cover.length>=1&&spread.cover.length<3">
      <div class="left">
        <div class="content">{{spread.title}}</div>
        <div class="info">{{spread.user.nickname}} {{spread.comment_length}}跟帖</div>
      </div>
      <img :src="spread.cover[0].url | fixImgUrl" alt class="imgs right" />
    </div>
    <!-- 三张图以上 typy=1是图片,typy=2是视频-->
    <div class="three" v-else-if="spread.type==1&& spread.cover.length>=3">
      <div class="content top">{{spread.title}}</div>
      <div class="threeimg">
        <img :src="spread.cover[0].url | fixImgUrl" alt class="imgs" />
        <img :src="spread.cover[1].url | fixImgUrl" alt class="imgs" />
        <img :src="spread.cover[2].url | fixImgUrl" alt class="imgs" />
      </div>
      <div class="info">{{spread.user.nickname}} {{spread.comment_length}}跟帖</div>
    </div>
    <!-- 视频 typy=1是图片,typy=2是视频 -->
    <div class="video" v-else-if="spread.type==2&& spread.cover.length>=1">
      <div class="content top">{{spread.title}}</div>
      <div class="videoimgs">
        <img :src="spread.cover[0].url | fixImgUrl" alt class="videoimg" />
        <div class="icon">
          <span class="iconfont iconshipin"></span>
        </div>
      </div>
      <div class="info">{{spread.user.nickname}} {{spread.comment_length}}跟帖</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["spread", "enshrineitem"],
  // filters: {
  //   fixImgUrl(url) {
  //     //过滤器对于url,是dom里面执行的,所以this是undefined,获取不到.要想全局最终也是要在main入口那里写的.
  //     const fullUrlReg = /^http/;
  //     if (fullUrlReg.test(url)) {
  //       // console.log(this); //undefined
  //       return url;
  //     } else {
  //       // return this.$axios.defaults.baseURL + url; 获取不了this,这个不行
  //       //return 'http://127.0.0.1:3000' + url; 这个可以
  //     }
  //   }
  // }
  // // mounted() {
  // //   console.log(this); 这里能打印this出来,就证明filters是针对dom的原因了
  // // }
  methods: {
    go() {
      this.$emit("gopage");
    }
  }
};
</script>
    <!-- 三张图以下 -->
<style lang="less" scoped>
.single {
  padding: 10px 16px 10px 16px;
  display: flex;
  border-bottom: 1px solid #e4e4e4;
}
.left {
  flex: 1;
}
.imgs {
  width: 108px;
  height: 74px;
}
.content {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}
.info {
  margin-top: 10px;
  font-size: 13px;
  color: #bbb;
}
// <!-- 三张图以上 -->
.three {
  padding: 10px 16px 10px 16px;
  border-bottom: 1px solid #e4e4e4;
  .threeimg {
    display: flex;
    justify-content: space-between;
  }
}
// <!-- 视频 -->
.video {
  position: relative;
  padding: 10px 16px 10px 16px;
  border-bottom: 1px solid #e4e4e4;
}
.videoimg {
  width: 100%;
  height: 100%;
}
.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  text-align: center;
  line-height: 54px;
  margin-left: -27px;
  margin-top: -27px;
  border-radius: 50%;
  background-color: rgba(233, 220, 215, 0.7);
}
.iconshipin {
  font-size: 46px;
  color: white;
}
</style>